<template>
	<!-- 20221028 -->
	<view class="swiper-home-cn width-100p height-100p">
		<!-- 组件内容 -->
		<view class="cn-content width-100p height-100p">
			<swiper 
				:style="{height: height + 'rpx'}" 
				:indicator-dots="listShow.length > 1 ? true : false"
				indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff"
				:autoplay="listShow.length > 1 ? true : false" :current="active" interval="3000" duration="1000"
				:circular="true">
				<swiper-item class="width-100p" 
					v-for="(item,index) in listShow" :key="index" :data-index="index">
					<image class="image" 
					:style="{'border-radius': radius + 'rpx'}" 
					:src="item.image" :mode="mode" @tap="clickImg(index)"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 数据显示
			list: {
				type: Array,
				default: []
			},
			// 当 list 是一个 Array 时，通过 该参数 来指定 Object 中 key 的值作为轮播图的图片
			listKey: {
				type: String,
				default: 'image'
			},
			// 当 list 是一个 Array 时，通过 该参数 来指定 Object 中 key 的值作为轮播图的链接地址
			listUrlKey: {
				type: String,
				default: 'link_url'
			},
			// 轮播图高度，默认单位为rpx
			height: {
				type: [Number, String],
				default: 260
			},
			// 轮播图边框圆角，默认单位为rpx
			radius: {
				type: [Number, String],
				default: 10
			},
			// 自动轮播间隔，单位为 ms
			autoplay: {
				type: [Number, String],
				default: 2000
			},
			// 是否开启循环播放
			loop: {
				type: Boolean,
				default: true
			},
			// 初始位置索引值
			active: {
				type: [Number, String],
				default: 0
			},
			// 图片裁剪、缩放的模式
			mode: {
				type: String,
				default: 'aspectFill'
			}
		},
		computed: {
			listShow() {
				let array = []
				for (let i = 0; i < this.list.length; i++) {
					let obj = {}
					if (this.listKey) {
						obj.image = this.list[i][this.listKey]
					} else {
						obj.image = this.list[i]
					}
					if (this.listUrlKey) {
						obj.url = this.list[i][this.listUrlKey]
					} else {
						obj.url = ''
					}
					array.push(obj)
				}
				return array
			}
		},
		methods: {
			clickImg(index) {
				this.$emit('clickImg',index)
				return false
				// http跳转url /pages跳转内部页面
				let url = this.listShow[index].url
				if (!url) {
					return false
				}
				let str = url.substring(0, 4)
				if (str == 'http') {
					uni.setStorageSync('webview_url', url)
					uni.navigateTo({
						url: '/pages/common/webview'
					})
				} else if (str == '/pag') {
					uni.navigateTo({
						url: url
					})
				}
			},
		}
	}
</script>

<style scoped>
	.image {
		display: block;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
</style>
